<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Night-Reading</title>
    <link rel="stylesheet" href="Night-Reading.css">
    <link rel="stylesheet" href="MY-animated-navigation.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="nav1">
                <ul>
                    <h1 class="logo">暗读</h1>
                    <li><a href="">玄幻</a></li>
                    <li><a href="">都市</a></li>
                    <li><a href="">仙侠</a></li>
                    <li><a href="">科幻</a></li>
                </ul>
            </div>

            <div class="nav2">
                <div class="search">
                    <input type="text">
                    <span></span>
                </div>
                <ul>
                    <li><a href="">登录</a></li>
                    <li><a href="">注册</a> </li>
                    <li><a href="">我的书架</a> </li>
                </ul>
            </div>
        </div>

    </header>
    <div id="mydiv">
        <div id="nav" class="active">
            <ul>
                <li><a href="#xuanhuan">玄幻</a></li>
                <li><a href="#dushi">都市</a></li>
                <li><a href="#wuxia">武侠</a></li>
                <li><a href="#kehuan">科幻</a></li>
                <li><a href="#zuozhe">作者</a></li>
            </ul>
            <button class="icon toggle">
                <div class="line line1"></div>
                <div class="line line2"></div>
            </button>
        </div>
    </div>
    <main>
        <div id="nav3">
            <ul>
                <li><a href="#xuanhuan">玄幻</a></li>
                <li><a href="#dushi">都市</a></li>
                <li><a href="#wuxia">武侠</a></li>
                <li><a href="#kehuan">科幻</a></li>
                <li><a href="#zuozhe">作者</a></li>
            </ul>
        </div>
        <div class="searchMain">
            <input type="text">
            <span></span>
        </div>
        <div class="classify">
            <a name="xuanhuan">玄幻</a>
            <div class="wall"></div>
            <div class="bottom">
                <div class="left1">
                    <img src="image/o1.webp" alt="">
                </div>
                <div class="right">
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                </div>
            </div>
        </div>
        <div class="classify"><a name="dushi">都市</a>
            <div class="wall"></div>
            <div class="bottom">
                <div class="left2">
                    <img src="image/o2.webp" alt="">
                </div>
                <div class="right">
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                </div>
            </div>
        </div>
        <div class="classify"><a name="wuxia">武侠</a>
            <div class="wall"></div>
            <div class="bottom">
                <div class="left3">
                    <img src="image/o3.webp" alt="">
                </div>
                <div class="right">
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                </div>
            </div>
        </div>
        <div class="classify"><a name="kehuan">科幻</a>
            <div class="wall"></div>
            <div class="bottom">
                <div class="left4">
                    <img src="image/o4.webp" alt="">
                </div>
                <div class="right">
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                    <ul>
                        <li>诡秘之主</li>
                        <div class="wall"></div>
                        <li>将夜</li>
                        <div class="wall"></div>

                        <li>不科学御兽</li>
                        <div class="wall"></div>

                        <li>永夜君王</li>
                        <div class="wall"></div>

                        <li>逆天邪神</li>
                        <div class="wall"></div>

                    </ul>
                </div>
            </div>
        </div>

    </main>
    <footer>
        <section id="writer">
            <a name="zuozhe" style="font-size: 20px;">作者</a>
            <div class="wall"></div>
            <div class="writer">
                <ul class="writer">
                    <li><span>辰东</span>
                        <div class="wall"></div>
                        <ul>
                            <li class="o1"><a href="">不死不灭</a> </li>
                            <li class="o2"><a href="">神墓 </a> </li>
                            <li class="o3"><a href="">遮天 </a> </li>
                            <li class="o4"><a href="">完美世界</a> </li>
                            <li class="o5"><a href="">长生界 </a> </li>
                        </ul>
                    </li>
                    <li><span>我吃西红柿</span>
                        <div class="wall"></div>
                        <ul>
                            <li class="o1"><a href="">星辰变 </a> </li>
                            <li class="o2"><a href="">雪鹰领主</a></li>
                            <li class="o3"><a href="">寸芒 </a> </li>
                            <li class="o4"><a href="">盘龙 </a> </li>
                            <li class="o5"><a href="">沧元图 </a> </li>
                        </ul>
                    </li>
                    <li><span>耳根</span>
                        <div class="wall"></div>

                        <ul>
                            <li class="o1"><a href="">求魔 </a> </li>
                            <li class="o2"><a href="">光阴之外</a></li>
                            <li class="o3"><a href="">我欲封天</a></li>
                            <li class="o4"><a href="">一念永恒</a></li>
                            <li class="o5"><a href="">仙逆 </a> </li>
                        </ul>
                    </li>
                    <li><span>骷髅精灵</span>
                        <div class="wall"></div>

                        <ul>
                            <li class="o1"><a href="">界王 </a> </li>
                            <li class="o2"><a href="">三眼艳情咒</a></li>
                            <li class="o3"><a href="">机动风暴 </a> </li>
                            <li class="o4"><a href="">御九天 </a> </li>
                            <li class="o5"><a href="">圣堂 </a> </li>
                        </ul>
                    </li>
                    <li><span>烽火戏诸侯</span>
                        <div class="wall"></div>

                        <ul>
                            <li class="o1"><a href="">极品公子 </a> </li>
                            <li class="o2"><a href="">雪中悍刀行 </a> </li>
                            <li class="o3"><a href="">剑来 </a> </li>
                            <li class="o4"><a href="">陈二狗的妖孽人生</a> </li>
                            <li class="o5"><a href="">老子是癞蛤蟆 </a> </li>
                        </ul>
                    </li>
                    <li><span>天蚕土豆</span>
                        <div class="wall"></div>

                        <ul>
                            <li class="o1"><a href="">元尊 </a> </li>
                            <li class="o2"><a href="">大主宰 </a> </li>
                            <li class="o3"><a href="">斗破苍穹</a></li>
                            <li class="o4"><a href="">武动乾坤</a></li>
                            <li class="o5"><a href="">道 </a> </li>
                        </ul>
                    </li>
                    <li><span>萧鼎</span>
                        <div class="wall"></div>
                        <ul>
                            <li class="o1"><a href="">诛仙 </a> </li>
                            <li class="o2"><a href="">诛仙第二部 </a> </li>
                            <li class="o3"><a href="">戮仙 </a> </li>
                            <li class="o4"><a href="">六迹之大荒祭</a></li>
                            <li class="o5"><a href=""> </a> </li>
                        </ul>
                    </li>
                    <li><span>鱼人二代</span>
                        <div class="wall"></div>

                        <ul>
                            <li class="o1"><a href="">校花的贴身高手</a> </li>
                            <li class="o2"><a href="">重生追美记 </a> </li>
                            <li class="o3"><a href="">很纯和暧昧 </a> </li>
                            <li class="o4"><a href="">极品修真强少 </a> </li>
                            <li class="o5"><a href=""> </a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </section>
    </footer>
</body>

</html>
<script src="jQuery.js"></script>
<script type="text/javascript"></script>
<script src="Night-Reading.js"></script>
<script src="MY-animated-navigation.js"></script>